import React, { Suspense } from 'react'
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import AuthRoute from './components/AutnRoute'
import NotFound from './pages/NotFound'
import history from './utils/history'
const Login = React.lazy(() => import('@/pages/Login'))
const Home = React.lazy(() => import('@/pages/Layout'))
const EditUser = React.lazy(() => import('@/pages/Profile/Edit'))
const Chat = React.lazy(() => import('@/pages/Profile/Chat'))
export default function App() {
  return (
    <Router history={history}>
      <Suspense fallback={<div>loading...</div>}>
        <Switch>
          <Redirect exact from="/" to="/home"></Redirect>
          <Route path="/login" component={Login}></Route>
          <Route
            path="/home"
            render={() => {
              return <Home />
            }}
          ></Route>
          {/* 需要登录后访问 */}
          <AuthRoute path="/profile/edit" component={EditUser}></AuthRoute>
          <AuthRoute path="/profile/chat" component={Chat}></AuthRoute>
          {/* Not Found */}
          <Route component={NotFound}></Route>
        </Switch>
      </Suspense>
    </Router>
  )
}
